<template>
	<view class="content">
		<view class="sobox" v-show="false">
			<my-sobox placeholder="请输入搜索内容"></my-sobox>
		</view>
		<view class="bannerbox" v-for="item in banner">
			<image :src="item.image" mode="aspectFill"></image>
		</view>
		<view class="titlebox">
			<d-tab :list="tabList" :defaultCurr="defaultCurr" @tabClick="tabClick"></d-tab>
			<!-- <view class="addressbox" @click="$util.$navigateTo('./areaselect')">
				<text>{{address}}</text>
				
			</view> -->
		</view>
		<view class="indexList" v-for="item in list" @click="pageTo(item)">
			<view class="indexList-item">
				<view class="row01">
					<text class="left">{{item.title}}</text>
					<text class="right">{{item.amount}}</text>
				</view>
				<view class="row02">
					
						<text v-for="sub in item.tag">{{sub}}</text>
					
				</view>
				
				<view class="row03">
					<text class="left">{{item.shop.merchantName}}</text>
					<text class="right">{{item.area.name}}</text>
				</view>
			</view>
			<view class="line"></view>
			
		</view>
		<view class="br-btn">
			<image src="../../static/btnbg.png"></image>
			<button @click="$util.$navigateTo('../usercenter/record')">记录</button>
		</view>
	</view>
</template>

<script>
	import mySobox from '@/components/my-sobox.vue'
	import dTab from '@/components/dTab.vue'
	export default {
		components: {
			mySobox,
			dTab
		},
		data() {
			return {
				defaultCurr: '0',
				tabList: [{
					name: '推荐',
					status: '0'
				}],
				address: '',
				list: [],
				isLastPage: false,
				banner: [],
				page:1
			}
		},
		onShow: function() {
			this.getList();
			this.list = [];
			this.page =1;
			this.address = this.$util.$getStorageSync("address")
		},
		onReachBottom() {
			
			if(this.isLastPage) return;
			this.page += 1;
			this.getList();
		},
		methods: {
			search() {

			},
			pageTo(item){
				uni.navigateTo({
					url:'./indexDetail?id='+item.id
				})
			},
			getList() {
				let param = {
					page: this.page,
				}
				let that = this;
				this.$api.firstIndex(param).then(res => {
					if (res.code == 1) {

						that.banner = res.data.banner;
						let length = res.data.list.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data.list[i]);
						}
						if (length < 10) {
							that.isLastPage = true;
						} else {
							that.isLastPage = false;
						}
					}

				})
			},
			tabClick(status) {
				this.defaultCurr = status
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	.sobox {
		margin-left: -10rpx;
		padding: 10rpx 30rpx;
		background: $uni-color-primary;
	}

	.bannerbox {
		margin: 20rpx auto;
		text-align: center;

		image {
			width: 690rpx;
			height: 270rpx;
		}
	}

	.titlebox {
		position: relative;

		.addressbox {
			position: absolute;
			right: 30rpx;
			top: 0rpx;
			font-size: 24rpx;
			color: #666;
			background: #F5F5F5;
			padding: 10rpx 20rpx;
			border-radius: 6rpx;
		}
	}

	.indexList {
		.indexList-item {
			padding: 40rpx;

			.row01 {
				display: flex;
				padding-bottom: 20rpx;

				.left {
					flex: auto;
					font-size: 34rpx;
					color: #333333;
					font-weight: bold;
				}

				.right {
					color: $uni-color-primary;
					font-size: 30rpx;
				}
			}

			.row02 {
				padding-bottom: 20rpx;

				text {
					background: #f5f5f5;
					padding: 5rpx;
					margin-right: 20rpx;
					border-radius: 6rpx;
					font-size: 22rpx;
					color: $uni-text-color666;
				}
			}

			.row03 {
				display: flex;

				.left {
					flex: auto;
					font-size: 26rpx;
					color: #333;
				}

				.right {
					font-size: 24rpx;
					color: #ADADAD;
				}
			}
		}
	}
	.br-btn{
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 170rpx;
		height: 170rpx;
		button{
			border-radius: 50%;
			line-height: 170rpx;
			text-align: center;
			color: #ffffff;
			height: 170rpx;
			width: 170rpx;
			font-size: 30rpx;
			letter-spacing: 5rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		image{
			position: absolute;
			top: 0;
			left: 0;
			width: 170rpx;
			height: 170rpx;
			z-index: 1;
		}
	}
</style>
